<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <html>
    <head>

    <link href="3part/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="3part/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="3part/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="3part/easyui/demo.css">
    <script type="text/javascript" src="3part/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="3part/easyui/jquery.easyui.min.js"></script>
    <script src="3part/bootstrap/css/bootstrap.min.css"></script>
    <script src="3part/bootstrap/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
	    //配置-系统管理--树型菜单start
	    $(function(){
				$('#treemenu1').tree({
					method: 'GET',
					onClick: function(node){
						//alert(node.attributes.url);
						addTab(node.text,node.attributes.url);//以Tab方式在主工作区中显示
					},
					url: 'data/tree6_data.json',//取得json数据
					loadFilter: function(rows){
						return convert(rows);//把json中的数据转换成treemenu的属性信息
					}
				});
			});
		function convert(rows){
			function exists(rows, parentId){
				for(var i=0; i<rows.length; i++){
					if (rows[i].id == parentId) return true;
				}
				return false;
			}
			
			var nodes = [];
			// get the top level nodes
			for(var i=0; i<rows.length; i++){
				var row = rows[i];
				if (!exists(rows, row.parentId)){
					
					nodes.push({
						id:row.id,
						text:row.name
					});
				}
			}
			
			var toDo = [];
			for(var i=0; i<nodes.length; i++){
				toDo.push(nodes[i]);
			}
			while(toDo.length){
				var node = toDo.shift();	// the parent node
				// get the children nodes
				for(var i=0; i<rows.length; i++){
					var row = rows[i];
					if (row.parentId == node.id){
						
						var child = {id:row.id,text:row.name,attributes:{url:row.url}};//取得json数据，建立每个节点的属性
						if (node.children){
							node.children.push(child);
						} else {
							node.children = [child];
						}
						toDo.push(child);
					}
				}
			}
			return nodes;
		}
		
		//....end
	</script>
	
	<script>
	//.........主工作区增加Tab............
		function addTab(title, url){
			if ($('#workarea').tabs('exists', title)){
				$('#workarea').tabs('select', title);
			} else {
				var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
				$('#workarea').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
			}
		}
	</script>
    </head>
    <body>
  
    <div style="margin:0px 0;"></div>
    <div class="easyui-layout" fit="true">
    <div data-options="region:'north'" style="height:50px">Banner</div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <!-- west -->
    <div data-options="region:'west',split:true" title="West" style="width:200px;"  >
    	<div class="easyui-accordion"  fit="true">
	    	<div title="系统管理"  selected="true" iconCls="icon-ok" style="overflow:auto;padding:0px;width:100%">
				<div class="easyui-tabs" fit="true"  >
					
					<div title="架构" data-options="iconCls:'icon-user',closable:false" style="padding:10px">
						<div class="accordion-inner"><ul class="nav nav-list">
						<li><a href="#" onclick="addTab('组织架构','http://www.google.com.hk')" ><i class="icon-th-large"></i>&nbsp;组织架构</a></li>
						<li><a href="#" onclick="addTab('用户管理','http://www.baidu.com')" ><i class="icon-user"></i>&nbsp;用户管理</a></li>			
						</ul>
						</div>
					</div>
					
					<div title="系统" data-options="iconCls:'',closable:false" style="padding:10px">
						<div class="accordion-inner">
							<ul class="nav nav-list">
								<li><a href="#"  ><i class="icon-list-alt"></i>&nbsp;菜单管理</a></li>							
								<li><a href="#" ><i class="icon-th-list"></i>&nbsp;字典管理</a></li>
							</ul>
						</div>
					</div>
					<div title="权限" data-options="iconCls:'',closable:false" style="padding:10px">
						<div class="accordion-inner">
							<ul class="nav nav-list">							
								<li><a href="#" ><i class="icon-lock"></i>&nbsp;角色管理</a></li>
								<li><a href="#" ><i class="icon-eye-open"></i>&nbsp;权限管理</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div title="功能模块" iconCls="icon-reload"  style="padding:10px;">
				<ul id="treemenu1"></ul>
			</div>
		</div>
    </div>
    <!-- 主工作区 -->
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
    <div id="workarea" class="easyui-tabs" fit="true"><!-- 长宽自适应 -->
		<div title="Home" style="width:100%">
		默认Tab窗口
		</div>
	</div>
    
    </div>
    </div>
     
    </body>
    </html>

